<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>回收站地图 - 废物回收管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=mNFuffn83uuKvzWesj3uqfVho6CVP9LI"></script>
    <style>
        body {
            background-color: #f8f9fa;
        }
        .map-container {
            max-width: 1200px;
            margin: 2rem auto;
        }
        #baiduMap {
            width: 100%;
            height: 600px;
            border-radius: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .station-list {
            background: white;
            border-radius: 15px;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            max-height: 600px;
            overflow-y: auto;
        }
        .station-item {
            padding: 1rem;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .station-item:hover {
            background-color: #f8f9fa;
        }
        .station-item:last-child {
            border-bottom: none;
        }
        .station-name {
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        .station-info {
            color: #6c757d;
            font-size: 0.9rem;
        }
        .station-status {
            padding: 0.25rem 0.5rem;
            border-radius: 10px;
            font-size: 0.8rem;
        }
        .status-open {
            background-color: #d1e7dd;
            color: #198754;
        }
        .status-closed {
            background-color: #f8d7da;
            color: #dc3545;
        }
        .search-box {
            position: relative;
            margin-bottom: 1rem;
        }
        .search-box input {
            padding-left: 2.5rem;
        }
        .search-box i {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #6c757d;
        }
        .toggle-list {
            position: fixed;
            top: 5rem;
            right: 1rem;
            z-index: 1000;
            background: white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: transform 0.2s;
        }
        .toggle-list:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/resident">
                <i class="fas fa-recycle me-2"></i>废物回收管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/resident">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/orders/create">预约回收</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/category/guide">分类指南</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 回收站列表 -->
            <div class="col-md-3 station-list" id="stationList">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" class="form-control" placeholder="搜索回收站..." 
                           onkeyup="searchStations(this.value)">
                </div>
                <div class="station-item" th:each="station : ${stations}" 
                     th:onclick="'showStationInfo(' + ${station.id} + ')'">
                    <div class="d-flex justify-content-between align-items-start">
                        <div class="station-name" th:text="${station.name}">回收站名称</div>
                        <span class="station-status" 
                              th:classappend="${station.status == 1 ? 'status-open' : 'status-closed'}"
                              th:text="${station.status == 1 ? '营业中' : '已关闭'}">营业中</span>
                    </div>
                    <div class="station-info">
                        <div class="mb-1">
                            <i class="fas fa-map-marker-alt me-2"></i>
                            <span th:text="${station.address}">回收站地址</span>
                        </div>
                        <div>
                            <i class="fas fa-clock me-2"></i>
                            <span th:text="${station.businessHours}">营业时间：09:00-18:00</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 百度地图 -->
            <div class="col-md-9">
                <div id="baiduMap"></div>
            </div>
        </div>
    </div>

    <!-- 切换列表按钮 -->
    <div class="toggle-list" onclick="toggleStationList()">
        <i class="fas fa-list"></i>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <!-- 引入地图组件 -->
    <script src="/static/js/map-component.js"></script>
    <script>
        let mapComponent;
        
        // 初始化地图
        document.addEventListener('DOMContentLoaded', () => {
            mapComponent = new BaiduMapComponent('stationMap', {
                enableGeolocation: true,
                onMapInitialized: function(map) {
                    console.log('地图初始化完成');
                    loadAllStations();
                }
            });
            
            mapComponent.init().catch(error => {
                console.error('地图初始化失败:', error);
            });
            
            // 绑定搜索事件
            $('#searchInput').on('input', function() {
                const keyword = $(this).val().trim();
                if (keyword) {
                    searchStations(keyword);
                } else {
                    loadAllStations();
                }
            });
            
            // 绑定列表切换事件
            $('#toggleList').click(function() {
                $('#stationList').toggleClass('show');
                $(this).toggleClass('active');
            });
        });

        // 加载所有回收站
        function loadAllStations() {
            $.get('/api/stations/all', function(stations) {
                mapComponent.clearMarkers();
                updateStationList(stations);
                stations.forEach(addStationToMap);
            });
        }
        
        // 搜索回收站
        function searchStations(keyword) {
            $.get('/api/stations/search', { keyword: keyword }, function(stations) {
                mapComponent.clearMarkers();
                updateStationList(stations);
                stations.forEach(addStationToMap);
            });
        }
        
        // 更新回收站列表
        function updateStationList(stations) {
            const $list = $('#stationList .list-group');
            $list.empty();
            
            stations.forEach(station => {
                const $item = $(`
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">${station.name}</h5>
                            <small class="text-${station.status === 'OPEN' ? 'success' : 'danger'}">
                                ${station.status === 'OPEN' ? '营业中' : '已关闭'}
                            </small>
                        </div>
                        <p class="mb-1">${station.address}</p>
                        <small>营业时间: ${station.businessHours}</small>
                    </a>
                `);
                
                $item.click(function(e) {
                    e.preventDefault();
                    mapComponent.panTo({
                        lng: station.longitude,
                        lat: station.latitude
                    });
                    mapComponent.showInfoWindow(station.name);
                });
                
                $list.append($item);
            });
        }
        
        // 在地图上添加回收站标记
        function addStationToMap(station) {
            mapComponent.addMarker({
                position: {
                    lng: station.longitude,
                    lat: station.latitude
                },
                title: station.name,
                content: `
                    <div class="info-window">
                        <h5>${station.name}</h5>
                        <p>${station.address}</p>
                        <p>营业时间: ${station.businessHours}</p>
                        <p>联系电话: ${station.phone}</p>
                        <p>可回收物品: ${station.acceptableItems}</p>
                        <p class="text-${station.status === 'OPEN' ? 'success' : 'danger'}">
                            状态: ${station.status === 'OPEN' ? '营业中' : '已关闭'}
                        </p>
                    </div>
                `
            });
        }
    </script>
</body>
</html> 